import dash
import feffery_antd_components as fac
from dash import html
from dash.dependencies import Input, Output, State, ClientsideFunction

from server import app

layout = html.Div(
    [
        fac.AntdButton(
            '展开',
            id='tab3-demo-button1'
        ),
        fac.AntdCollapse(
            'dash',
            id='tab3-demo-collapse1',
            title='折叠面板测试1',
            is_open=False
        ),
        fac.AntdDivider(isDashed=True),
        fac.AntdButton(
            '展开',
            id='tab3-demo-button2'
        ),
        fac.AntdCollapse(
            'dash',
            id='tab3-demo-collapse2',
            title='折叠面板测试2',
            is_open=False
        ),
        fac.AntdDivider(isDashed=True),
        fac.AntdButton(
            '展开',
            id='tab3-demo-button3'
        ),
        fac.AntdCollapse(
            'dash',
            id='tab3-demo-collapse3',
            title='折叠面板测试3',
            is_open=False
        )
    ]
)


@app.callback(
    [Output('tab3-demo-collapse1', 'is_open'),
     Output('tab3-demo-button1', 'children')],
    Input('tab3-demo-button1', 'nClicks'),
    State('tab3-demo-collapse1', 'is_open')
)
def tab3_callback_demo1(nClicks, is_open):
    if nClicks:
        return not is_open, '展开' if is_open else '关闭'

    return dash.no_update


app.clientside_callback(
    '''(nClicks, is_open) => {
        if (nClicks) {
            return [
                !is_open,
                is_open ? '展开' : '关闭'
            ];
        }

        return window.dash_clientside.no_update;
    }''',
    [Output('tab3-demo-collapse2', 'is_open'),
     Output('tab3-demo-button2', 'children')],
    Input('tab3-demo-button2', 'nClicks'),
    State('tab3-demo-collapse2', 'is_open')
)

app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='tab3_callback_demo3'
    ),
    [Output('tab3-demo-collapse3', 'is_open'),
     Output('tab3-demo-button3', 'children')],
    Input('tab3-demo-button3', 'nClicks'),
    State('tab3-demo-collapse3', 'is_open')
)
